<template>
    <div class="login-page">
        <div class="login-container">
            <div class="login-title">
                <span>登录</span>
            </div>
            <el-form :model="form" label-width="80px">
                <el-form-item label="账号">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="login">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { IRequest } from '@/utils/request'

export default {
    name: 'Login',
    data() {
        return {
            form: {
                username: '',
                password: ''
            }
        }
    },
    mounted: function(){
        // console.log('login mounted')
        // console.log(this.$route.path)
    },
    methods: {
        login(){
            console.log('username: ' + this.form.username + ', password: ' + this.form.password)
            IRequest({
                method: 'post',
                url: '/user/login',
                data: this.form,
                successCallBack: data => {
                    console.log(data)
                    this.$router.push({ path: '/' })
                }
            })

            // .then(response => {
                // this.$router.push({ path: '/' })
                // console.log(response.data)
            // })
        }
    }
}
</script>

<style lang="scss" scoped>
.login-page{
    width: 100%;
    min-height: 100vh;
    background-color: #66ccff;
    display: flex;
    justify-content: center;
    align-items: center;
    .login-container{
        width: 400px;
        height: 400px;
        .login-title{
            text-align: center;
            font-size: 26px;
            padding: 10px 0;
        }
    }
}
</style>